<!--工作经历表单-->
<template>
  <div class="form">
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="label required">家庭成员姓名</span>
        <xf-input
          slot="right"
          :valid="[{required: true, msg: '请输入家庭成员姓名'}]"
          v-model="form.siName"
          ref="siName"
          placeholder="请输入家庭成员姓名"></xf-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label required">与本人的关系</span>
        <xf-picker
          :valid="[{required: true, msg: '请选择与本人的关系'}]"
          v-model="form.siCode"
          ref="siCode"
          search
          :list="family"
          placeholder="请选择与本人的关系"
          slot="right"></xf-picker>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="label">家庭成员工作单位及职务</span>
        <xf-input
          slot="right"
          :valid="[{reg: /^.{0,50}$/, msg: '家庭成员工作单位及职务最多50个字符'}]"
          v-model="form.siNamePost"
          ref="siNamePost"
          placeholder="请输入家庭成员工作单位及职务"></xf-input>
      </yd-cell-item>
    </yd-cell-group>
    <div class="right-bottom">
      <mt-button type="default" size="small" @click="cancel">取消</mt-button>
      <mt-button type="primary" size="small" @click="onSubmit">保存</mt-button>
    </div>
  </div>
</template>
<script>
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import {validate, echo} from '../../../common/js/util'
  import XfPicker from '../../../components/xf-picker/xf-picker'
  import {getDics, dics} from '../../../common/js/dictionaries'

  export default {
    components: {
      XfPicker,
      XfInput},
    name: 'form-family',
    props: {
      detail: {type: null, default: () => { return {} }}
    },
    data() {
      return {
        form: {
          personId: this.$route.query.id,
          id: '',
          siName: '', // 家庭成员姓名
          siCode: '', // 与本人关系code
          siNamePost: '' // 工作单位及职务
        },
        family: []
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/update/situation', this.form, loading => {
            this.$message.loading(loading)
          }).then(res => {
            this.$emit('save')
          })
        })
      },
      getDics() {
        getDics(dics.family).then(res => {
          this.family = res[0]
        })
      }
    },
    created() {
      this.getDics()
      echo(this.form, this.detail)
    }
  }
</script>
